<template>
  <div>
    <el-row :gutter="20" type="flex" justify="end">
      <div><el-button type="primary" size="default" @click="$router.push('/questions/new')">新增试题</el-button></div>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">学科：</el-col>
          <el-col :span="16" :offset="0">
            <el-select v-model="queryData.subjectID" placeholder="请选择" clearable filterable @change="changeFn">
              <el-option
                v-for="item in simplelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">二级目录：</el-col>
          <el-col :span="16" :offset="0">
            <el-select v-model="queryData.catalogID" value-key="" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in secondLevelDirectoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">标签：</el-col>
          <el-col :span="16" :offset="0">
            <el-select v-model="queryData.tags" value-key="" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in tagList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">关键字：</el-col>
          <el-col :span="16" :offset="0">
            <el-input v-model="queryData.keyword" placeholder="" size="normal" clearable />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">试题类型：</el-col>
          <el-col :span="16" :offset="0">
            <el-select v-model="queryData.questionType" value-key="" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">难度：</el-col>
          <el-col :span="16" :offset="0">
            <el-select v-model="queryData.subjectID" value-key="" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">方向：</el-col>
          <el-col :span="16" :offset="0">
            <el-input v-model="queryData.direction" placeholder="" size="normal" clearable />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">录入人：</el-col>
          <el-col :span="16" :offset="0">
            <el-input v-model="queryData.reatorID" placeholder="" size="normal" clearable />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">题目备注：</el-col>
          <el-col :span="16" :offset="0">
            <el-input v-model="queryData.remarks" placeholder="" size="normal" clearable />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">企业简称：</el-col>
          <el-col :span="16" :offset="0">
            <el-input v-model="queryData.shortName" placeholder="" size="normal" clearable />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0" class="input_tit">城市:</el-col>
          <el-col :span="8" :offset="0">
            <el-select v-model="queryData.province" value-key="" placeholder="请选择" clearable filterable>
              <el-option
                v-for="(item,index) in city"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-select v-model="queryData.city" value-key="" placeholder="请选择" clearable filterable>
              <el-option
                v-for="(item,index) in area"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-row :gutter="20" type="flex" justify="end">
          <el-col :span="6" :offset="0">
            <el-button size="default" @click="clearFn">清除</el-button>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-button type="primary" size="default" @click="btnOK">搜索</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import '@/mixins/city'
import chooseCity from '@/mixins/chooseCity'
import { getSecondLevelDirectory, getTag } from '@/api/choice'
export default {
  mixins: [chooseCity],
  props: {
    simplelist: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  data() {
    return {
      subjectID: '',
      queryData: {
        questionType: '', // 题型
        number: '', // 编号
        difficulty: '', // 难度
        tags: '', // 标签
        subjectID: '', // 学科
        catalogID: '', // 目录
        direction: '', // 方向
        remarks: '', // 题目备注
        shortName: '', // 企业ID
        reatorID: '', // 录入人
        province: '', // 省、直辖市
        city: '' // 区
      }, // 题目数据
      secondLevelDirectoryList: [],
      tagList: [],
      questionTypeList: [
        {
          value: 1,
          label: '单选'
        },
        {
          value: 2,
          label: '多选'
        },
        {
          value: 3,
          label: '简答'
        }
      ],
      difficulty: [
        {
          value: 1,
          label: '简单'
        },
        {
          value: 2,
          label: '一般'
        },
        {
          value: 3,
          label: '困难'
        }
      ]

    }
  },
  // watch: {
  //   queryData: {
  //     deep: true,
  //     async handler(newValue, oldValue) {
  //       console.log(newValue)
  //       const res = await getSecondLevelDirectory(newValue)
  //       this.tagList = await getTag(newValue)
  //       this.secondLevelDirectoryList = res
  //     }
  //   }
  // },
  methods: {
    btnOK() {
      this.$emit('upLoadForSearch', this.queryData)
    },
    clearFn() {
      this.$emit('upload')
      this.queryData = {}
      this.secondLevelDirectoryList = []
    },
    async changeFn() {
      const res = await getSecondLevelDirectory(this.queryData)
      this.tagList = await getTag(this.queryData)
      this.secondLevelDirectoryList = res
    }
  }

}
</script>

<style scoped lang="scss">
    .input_tit{
        text-align: right;
        line-height: 40px;
        font-size: 14px;
        font-weight: 700;
    }
</style>
